<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="shortcut icon" href="favicon.ico">

		<title>Sunshine Nails</title>

		<!-- Bootstrap core CSS -->
		<link href="./../css/bootstrap.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->

		<!-- Custom styles for this template -->
		<link href="./../styles.css" rel="stylesheet">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				$('#more').click(function() {
					var tag = $(this).data('tag'), maxid = $(this).data('maxid');

					$.ajax({
						type : 'GET',
						url : './instagram/ajax.php',
						data : {
							tag : tag,
							max_id : maxid
						},
						dataType : 'json',
						cache : false,
						success : function(data) {
							// Output data
							$.each(data.images_thumbnail, function(i, src) {
								$('#photos').append('<div class="col-sm-3"><a href="' + data.images_original[i] + '" title="" class="fancybox" data-fancybox-group="gallery"><img src="' + src + '" alt="Sunshinenails" class="img-responsive"/></a></div>');
							});

							// Store new maxid
							$('#more').data('maxid', data.next_id);
						}
					});
				});
			});
		</script>
	</head>
	<?php
	/**
	 * Instagram PHP API
	 */

	require_once 'instagram.class.php';

	// Initialize class with client_id
	// Register at http://instagram.com/developer/ and replace client_id with your own
	$instagram = new Instagram('d3380ca3776b4fee9c3e7e7b13addfd4');

	// Get latest photos according to geolocation for Växjö
	// $geo = $instagram->searchMedia(56.8770413, 14.8092744);

	$tag = 'sunshinenailsva';

	// Get recently tagged media
	$media = $instagram -> getTagMedia($tag);
	?>
	<!-- NAVBAR
	================================================== -->
	<body>
		<div class="navbar navbar-default" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="./../index.html">SUNSHINE NAILS</a>
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav pull-right">
						<li>
							<a href="./../index.html">Home</a>
						</li>
						<li>
							<a href="./../service.html">Service</a>
						</li>
						<li class="active">
							<a href="#">Gallery</a>
						</li>
						<li>
							<a href="./../about.html">About Us</a>
						</li>
						<li>
							<a href="./../contact.html">Contact Us</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row hd-row border-bt">
				<div class="col-sm-3 alert alert-block ">
					<span class="hd-name">Today</span><span class="hd-phone" id="open-time"></span>
				</div>
				<div class="col-sm-2 alert alert-block "></div>
				<div class="col-sm-2 alert alert-block btn-book">
					BOOK NOW
				</div>
				<div class="col-sm-2 alert alert-block "></div>

				<div class="col-sm-3 alert alert-block ">
					<span>Phone</span><span class="hd-phone">703 - 780 - 8438</span>
				</div>

			</div>
			<div class="glr-row" id="photos">

				<?php // Display first results in a <ul>

$i = 0;
foreach ($media->data as $data) {
//var_dump($data);
//die;
				?>
				<div class="col-sm-3">
				<a href="<?php echo $data -> images -> standard_resolution -> url?>" title="" class="fancybox" data-fancybox-group="gallery">
				<img src="<?php echo $data -> images -> low_resolution -> url?>" alt="Sunshinenails" class="img-responsive"/>
				</a>
				</div>

				<?php

				$i = $i + 1;
				}
				?>
			</div>
			<div class="row">
				<div class="col-xs-12 text-center alert alert-block border-bt">
					<button id="more" data-maxid="<?php echo $media -> pagination -> next_max_id ?>" data-tag="<?php echo $tag ?>" class="btn btn-info">
						See more
					</button>
				</div>
			</div>

			<div class="container">
				<footer>
					<p class="pull-right">
						<a href="#">Back to top</a>
					</p>
					<p>
						Copyright &copy; 2014 Sunshine Nails
					</p>
					<p>
						8332-B Richmond Hwy, Alexandria, Virginia
					</p>
					<p>
						703-780-8438
					</p>

				</footer>
			</div><!-- /.container -->

			<!-- Bootstrap core JavaScript
			================================================== -->
			<!-- Placed at the end of the document so the pages load faster -->
			<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>-->
			<script src="./../js/bootstrap.min.js"></script>
			<!-- Add mousewheel plugin (this is optional) -->
			<script type="text/javascript" src="./../../lib/jquery.mousewheel-3.0.6.pack.js"></script>

			<!-- Add fancyBox main JS and CSS files -->
			<script type="text/javascript" src="./../source/jquery.fancybox.js?v=2.1.5"></script>
			<link rel="stylesheet" type="text/css" href="./../source/jquery.fancybox.css?v=2.1.5" media="screen" />

			<!-- Add Button helper (this is optional) -->
			<link rel="stylesheet" type="text/css" href="./../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
			<script type="text/javascript" src="./../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

			<!-- Add Thumbnail helper (this is optional) -->
			<link rel="stylesheet" type="text/css" href="./../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
			<script type="text/javascript" src="./../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

			<!-- Add Media helper (this is optional) -->
			<script type="text/javascript" src="./../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
			<script type="text/javascript">
				$(document).ready(function() {
					$('.fancybox').fancybox();
					// $("#btnSeeMore").click(function() {
					// $(".glr-hidden").show();
					// $("#btnSeeMore").hide();
					// });
				});
			</script>
			<script type="text/javascript">
				$(document).ready(function() {
					var d = new Date();
					var n = d.getDay();
					if (n == 0) {
						$("#open-time").text('10:00 AM - 5:00 PM');
					} else if (n == 6) {
						$("#open-time").text('9:00 AM - 7:00 PM');
					} else {
						$("#open-time").text('10:00 AM - 8:00 PM');
					}
				});
			</script>
	</body>
</html>
